<template>
	<view class="scen-idle" v-if="leisurelyInfo.productId">
		<bar-title  bgColor='bg-white' :isSolid='false'>
			<block slot="content">{{leisurelyInfo.scenName}}</block>
		</bar-title>
		
		
		<!-- 发本人 -->
		<view class="issuer solid-bottom ">
			<view class="avatar-warp"  @click="$jumpPages('playinfo', {othername: leisurelyInfo.userName})">
				<image class="avatar" :src="leisurelyInfo.headurl"></image>
			</view>
			<view class="info">
				<view class="nickname">{{leisurelyInfo.nickname}}</view>
				<view class="time">分布于{{leisurelyInfo.gmtCreate}}</view>
			</view>
			
			<button class="line-cyan cu-btn round contact"
				@click.stop="confirmContact"
			>联系卖家</button>
		</view>
		
		<!-- 闲本详情 -->
		<view class="idle-scen padding">
			<view class="scen-title">
				<text class="title">{{leisurelyInfo.scenName}}</text>
				<text  class='cu-tag bg-cyan round sm'>{{leisurelyInfo.scenNum}}人本</text>
			</view>
			<view class="scen-sub">
				<view class="scen-price">
					<view class="new-price">
						<text class="text-price text-red">{{leisurelyInfo.productDiscountPrice}}</text>
					</view>
					<view class="old-price">
						原价<text class="text-price text-through">{{leisurelyInfo.productPrice}}</text>
					</view>
				</view>
				<view class="tag-group">
					<text  class='cu-tag bg-gray round' v-if="leisurelyInfo.isPackageMail==1">包邮</text>
					<text  class='cu-tag bg-gray round' v-if="leisurelyInfo.isPackageMail==0">不包邮</text>
					<text  class='cu-tag bg-gray round' v-if="leisurelyInfo.productCommquality">{{bigNum.format(leisurelyInfo.productCommquality)}}成新</text>
					<text  class='cu-tag bg-gray round' v-if="leisurelyInfo.isWhetherPrice==1">可讲价</text>
					<text  class='cu-tag bg-gray round' v-if="leisurelyInfo.isWhetherPrice==0">不讲价</text>
				</view>
			</view>
			<view class="scen-lssuer">发行商：{{leisurelyInfo.scriptPublisher}}</view>
			<view class="scen-drop">{{leisurelyInfo.productDescription}}</view>
			
			<view class="scen-imgs">
				<block v-for="(img, index) of imgList"
					:key="index"
				>
					<image class="img"
						:src="img.productsurl" 
						mode="widthFix"
					></image>
				</block>
			</view>
			
			<view class="inspect-warp">
				<image class="inspect" 
					src="/static/img/ic_secondhand_details.png" 
					mode="widthFix"
				></image>
			</view>
		</view>
		
		
		<!-- footer -->
		<view class="cu-tabbar-height"></view>
		<view class="footer">
			<view class="scen-btn flex response ">
				<!-- <button class="cu-btn block round"
					:class="!isCollect? 'line-cyan':'bg-cyan'"
					@click="tapCollect"
				>
					<text v-if="!isCollect">收藏</text>	
					<text v-else>已收藏</text>				
				</button> -->
				<button class="cu-btn block round bg-cyan"
					@click="tapShopping"
				>
					<text >购买</text>				
				</button>
			</view>
		</view>
	</view>
</template>


<script module="bigNum" lang="wxs">
	function format (num) {
		var nArr = ['零','一','二','三','四','五','六','七','八','九','十']
		if(num-0<11) {
			return nArr[num-0]
		}
		return ''
	}
    module.exports = {
		format: format
    }
</script>
<script>

import { Leisurely } from '@/models/leisurely.js';
let leisurely = new Leisurely()
export default {
	components: {
	},
	data() {
		return {
			productId: '',
			isCollect: false,
			leisurelyInfo: {},
			imgList: [],
		}
	},
	onLoad(option) {
		if(option && option.productId) {
			this.productId = option.productId
			this.getLeisurelyInfo()
			this.getLeisurelyImgs()
			
		}
	},
	methods: {
		async getLeisurelyInfo() {
			let leisurelyInfo = await Leisurely.getLeisurelyInfo(this.productId)
			this.leisurelyInfo = leisurelyInfo
		},
		async getLeisurelyImgs() {
			let imgList = await Leisurely.getLeisurelyImgs(this.productId)
			this.imgList = imgList
		},
		confirmContact() {
			this.$mTool.showModal({
				title: '提示',
				content: '如需联系，请前往APP查看！',
				showCancel: false
			})
		},
		tapShopping(){
			let err = leisurely.currentLeisurely(this.leisurelyInfo)
			if(err) {
				this.$mTool.showToast({
					title: err,
					icon: 'none'
				})
				return
			}
			this.$jumpPages('createOrderIdle', {
				productId:	this.leisurelyInfo.productId
			})
		}
	},
	onShareAppMessage (options) {
		if (options.from === "menu") {
			return {
				title: this.leisurelyInfo.scenName,
				imageUrl: this.leisurelyInfo.productIcon,
				path: '/pages/studio/scen_idle?productId=' + this.productId
			}
		}
	},
}
</script>

<style lang="scss" scoped>
page, .scen-idle{
	background: #FFFFFF;
	height: 100%;
}
.issuer{
	margin:0 30rpx;
	padding: 30rpx 0;
	display: flex;
	position: relative;
	.avatar{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.avatar-warp{
		width: 80rpx;
		height: 80rpx;
		margin-right: 30rpx;
	}
	.nickname{
		font-size: 28rpx;
		color: #000000;
		margin-bottom: 10rpx;
	}
	.time{
		font-size: 22rpx;
		color: #909090;
	}
	.contact{
		position: absolute;
		right: 0;
		top: 30rpx;
	}
}
.scen-title{
	margin-bottom: 20rpx;
	font-size: 18rpx;
	.title{
		font-weight: 700;
		font-size: 42rpx;
		color: #000000;
		margin-right: 28rpx;
	}
}
.scen-sub{
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	.scen-price{
		flex: 1;
		display: flex;
	}
	.new-price{
		color: #E42C2C;
		font-size: 32rpx;
		font-weight: 700;
		margin-right: 20rpx;
	}
	.old-price{
		color: #909090;
		font-size: 20rpx;
	}
	.text-through{
		text-decoration: line-through;
	}
}
.scen-lssuer{
	color: #909090;
	font-size: 24rpx;
	margin-bottom: 40rpx;
}
.scen-drop{
	margin-bottom: 36rpx;
	color: #000000;
	font-size: 28rpx;
	line-height: 1.6;
}
.scen-imgs{
	margin-bottom: 30rpx;
	.img{
		width: 100%;
		display: block;
	}
}
.inspect-warp{
	border-radius: 20rpx;
	.inspect{
		width: 100%;
		border-radius: 20rpx;
	}
}

.footer{
	height: 100rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	box-shadow: 1px 1px 10px #EEEEEE;
	.scen-btn{
		padding: 15rpx;
		.cu-btn{
			flex: 1;
			margin: 15rpx;
		}
	}
}
</style>
